<template>
    <div class="container">
      <div class="hook"><img src="../../img/成功.png"></div>
      <div class="success">操作成功</div>
      <div class="content">内容详情，根据实际文案安排</div>
      <div class="btno">按钮</div>
      <div class="btnt">按钮</div>
      <div class="footer">底部链接文本</div>
      <div class="bot">Copyright @ 2008-2013 CocoaChina.com</div>
    </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {

      }
    },
    methods: {

    }
  };
</script>

<style scoped>
.container{
  width: 100vw;
  height: 100vh;
}
.hook{
  height: 201rpx;
  width: 201rpx;
  background: #09bb06;
  border-radius: 50%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top:101rpx ;
  text-align: center;
}
img{
  width: 120rpx;
  height: 120rpx;
  margin-top: 20%;
}
.success{
  position: absolute;
  left: 40%;
  top:361rpx ;
}
  .content{
    color: #cecece;
    position: absolute;
    top: 450rpx;
    left: 16%;
  }
  .btno{
    width: 690rpx;
    height: 87rpx;
    text-align: center;
    line-height: 87rpx;
    color: white;
    position: absolute;
    top: 570rpx;
    left: 3%;
    background: #09bb06;
    border-radius: 5px;
    border: 1px solid #cdcdcd;
  }
  .btnt{
    width: 690rpx;
    height: 87rpx;
    text-align: center;
    line-height: 87rpx;
    position: absolute;
    top: 680rpx;
    left: 3%;
    background: #fbfbfc;
    border-radius: 5px;
    border: 1px solid #cdcdcd;
  }
  .footer{
    position: absolute;
    bottom: 61rpx;
    left: 35%;
    color:#a5b0c6;
  }
  .bot{
    position: absolute;
    bottom: 21rpx;
    color: #cdcdcd;
    font-size: 13px;
    left: 15%;
  }
</style>
